<template>
  <l-layout class="l-tab-page intelligentTrans" id="intelligentTrans">
    <div class="box l-rblock" :style="{overflow:scale==1?'auto': ''}">
      <div class="box_2 l-rblock" :style="{transform:`scaleY(${scale})`,transformOrigin: 'top'}">
        <img
          src="../../assets/bg2.png"
          alt=""
          style="width: 100%; height: 100%; position: absolute; left: 0; top: 0"
        />
        <div class="biContent l-rblock">
          <div class="biTop">
            <div class="top_left"></div>
            <div class="top_center">
              <img
                src="../../assets/header-bg.png"
                alt=""
                style="width: 100%; height: 56px"
              />
              <p class="top_p">重庆市大渡口区交通大数据可视化看板</p>
            </div>
            <div class="top_right">
              <span>2022年07月16日 星期六</span>
              <span style="margin-left: 16px; margin-right: 9px">晴</span>
              <i
                class="el-icon-sunny"
                style="color: #ffce59; margin-right: 17px"
              ></i>
              <span>20℃~24℃</span>
            </div>
          </div>
          <div class="biDown">
            <div class="down_left">
              <div class="l-rblock box1">
                <img
                  src="../../assets/border21.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="l-rblock">
                  <p class="p1">机电设备库存</p>
                  <div class="jid">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                    <div>7</div>
                    <p style="font-size: 18px">件</p>
                  </div>
                  <div class="jid2">
                    <img src="../../assets/6707.png" alt="" class="img_27" />
                    <div style="width: 56px; text-align: center">
                      <p style="color: #12db3a; font-size: 16px">1365</p>
                      <p style="color: #577cce">今日入库</p>
                    </div>
                    <div class="border_sty"></div>
                    <img src="../../assets/6708.png" alt="" class="img_27" />
                    <div style="width: 56px; text-align: center">
                      <p style="color: #12db3a; font-size: 16px">3458</p>
                      <p style="color: #577cce">今日出库</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="l-rblock box2">
                <img
                  src="../../assets/border21.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="l-rblock">
                  <p class="p1">系统设备情况</p>
                  <div class="jid">
                    <div class="div1">
                      <div class="div_bor">
                        <p><span style="font-size: 21px">96.5</span><span style="color: #577cce"> 分</span></p>
                        <p style="color: #577cce">本月总得分</p>
                      </div>
                      <div class="perfect">优</div>
                    </div>
                    <div>
                      <el-progress
                        type="circle"
                        :percentage="68.5"
                        style="width: 50px"
                        :stroke-width="10"
                        color="#3CD12F"
                      ></el-progress>
                      <p>收费系统</p>
                      <img src="../../assets/up.png" alt="" />
                    </div>
                    <div>
                      <el-progress
                        type="circle"
                        :percentage="68.5"
                        style="width: 50px"
                        :stroke-width="10"
                        color="#3CD12F"
                      ></el-progress>
                      <p>消防系统</p>
                      <img src="../../assets/up.png" alt="" />
                    </div>
                    <div class="blue_color">
                      <el-progress
                        type="circle"
                        :percentage="68.5"
                        style="width: 50px"
                        :stroke-width="10"
                        color="#0362F5"
                      ></el-progress>
                      <p>应急救援</p>
                      <img src="../../assets/up.png" alt="" />
                    </div>
                    <div>
                      <el-progress
                        type="circle"
                        :percentage="68.5"
                        style="width: 50px"
                        :stroke-width="10"
                        color="#0362F5"
                      ></el-progress>
                      <p>生态系统</p>
                      <img src="../../assets/up.png" alt="" />
                    </div>
                    <div>
                      <el-progress
                        type="circle"
                        :percentage="68.5"
                        style="width: 50px"
                        :stroke-width="10"
                        color="#FB412D"
                      ></el-progress>
                      <p>路况系统</p>
                      <img src="../../assets/down.png" alt="" />
                    </div>
                    <div>
                      <el-progress
                        type="circle"
                        :percentage="68.5"
                        style="width: 50px"
                        :stroke-width="10"
                        color="#0362F5"
                      ></el-progress>
                      <p>水利系统</p>
                      <img src="../../assets/up.png" alt="" />
                    </div>
                    <div>
                      <el-progress
                        type="circle"
                        :percentage="68.5"
                        style="width: 50px"
                        :stroke-width="10"
                        color="#FB412D"
                      ></el-progress>
                      <p>电力系统</p>
                      <img src="../../assets/down.png" alt="" />
                    </div>
                    <div>
                      <el-progress
                        type="circle"
                        :percentage="68.5"
                        style="width: 50px"
                        :stroke-width="10"
                        color="#3CD12F"
                      ></el-progress>
                      <p>机电系统</p>
                      <img src="../../assets/up.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="l-rblock box3">
                <img
                  src="../../assets/border21.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="l-rblock">
                  <p class="p1" style="padding-left: 11px">机电设备故障维护</p>
                  <div
                    style="
                      width: 100%;
                      height: 265px;
                      position: relative;
                      margin-top: 10px;
                    "
                  >
                    <l-echarts
                      :option="barOption"
                      style="height: 100%"
                    ></l-echarts>
                  </div>
                </div>
              </div>
            </div>
            <div class="down_center">
              <div class="l-rblock box1">
                <div>
                  <p><span class="p2">12794</span>万辆</p>
                  <p>实时通信数</p>
                </div>
                <div>
                  <p><span class="p2">10624</span>万辆</p>
                  <p>实时车流量</p>
                </div>
                <div>
                  <p><span class="p2">234</span>KM</p>
                  <p>实时拥堵路段</p>
                </div>
                <div>
                  <p><span class="p2">1638</span>起</p>
                  <p>本月累计交通事故</p>
                </div>
                <div>
                  <p><span class="p2">98.45</span>%</p>
                  <p>设备完好率</p>
                </div>
              </div>
              <div class="l-rblock box2">
                <div
                  :class="stateIndex == 0 ? 'bg' : ''"
                  @click="stateIndex = 0"
                >
                  <img src="../../assets/all.png" alt="" />
                  <p>全部</p>
                </div>
                <div
                  :class="stateIndex == 1 ? 'bg' : ''"
                  @click="stateIndex = 1"
                >
                  <img src="../../assets/camera.png" alt="" />
                  <p>摄像头</p>
                </div>
                <div
                  :class="stateIndex == 2 ? 'bg' : ''"
                  @click="stateIndex = 2"
                >
                  <img src="../../assets/car1.png" alt="" />
                  <p>车辆</p>
                </div>
                <div
                  :class="stateIndex == 3 ? 'bg' : ''"
                  @click="stateIndex = 3"
                >
                  <img src="../../assets/bridge.png" alt="" />
                  <p>桥梁</p>
                </div>
                <div
                  :class="stateIndex == 4 ? 'bg' : ''"
                  @click="stateIndex = 4"
                >
                  <img src="../../assets/board.png" alt="" />
                  <p>展示板</p>
                </div>
                <div
                  :class="stateIndex == 5 ? 'bg' : ''"
                  @click="stateIndex = 5"
                >
                  <img src="../../assets/toll.png" alt="" />
                  <p>收费站</p>
                </div>
                <div
                  :class="stateIndex == 6 ? 'bg' : ''"
                  @click="stateIndex = 6"
                >
                  <img src="../../assets/service.png" alt="" />
                  <p>服务区</p>
                </div>
                <div
                  :class="stateIndex == 7 ? 'bg' : ''"
                  @click="stateIndex = 7"
                >
                  <img src="../../assets/weather.png" alt="" />
                  <p>气象站</p>
                </div>
                <div
                  :class="stateIndex == 8 ? 'bg' : ''"
                  @click="stateIndex = 8"
                >
                  <img src="../../assets/construction.png" alt="" />
                  <p>施工</p>
                </div>
                <div
                  :class="stateIndex == 9 ? 'bg' : ''"
                  @click="stateIndex = 9"
                >
                  <img src="../../assets/gas.png" alt="" />
                  <p>加油站</p>
                </div>
              </div>
              <!-- 站点 -->
              <img
                src="../../assets/camera.png"
                alt=""
                class="img_state"
                style="left: 16%; top: 12%"
                v-if="stateIndex == 0 || stateIndex == 1"
              />
              <img
                src="../../assets/car1.png"
                alt=""
                class="img_state"
                style="left: 22%; top: 15%"
                v-if="stateIndex == 0 || stateIndex == 2"
              />
              <img
                src="../../assets/gas.png"
                alt=""
                class="img_state"
                style="left: 16%; top: 20%"
                v-if="stateIndex == 0 || stateIndex == 9"
              />
              <img
                src="../../assets/weather.png"
                alt=""
                class="img_state"
                style="left: 35%; top: 18%"
                v-if="stateIndex == 0 || stateIndex == 7"
              />
              <img
                src="../../assets/car1.png"
                alt=""
                class="img_state"
                style="left: 80%; top: 15%"
                v-if="stateIndex == 0 || stateIndex == 2"
              />
              <img
                src="../../assets/construction.png"
                alt=""
                class="img_state"
                style="left: 72%; top: 25%"
                v-if="stateIndex == 0 || stateIndex == 8"
              />
              <img
                src="../../assets/camera.png"
                alt=""
                class="img_state"
                style="left: 10%; top: 21%"
                v-if="stateIndex == 0 || stateIndex == 1"
              />
              <img
                src="../../assets/construction.png"
                alt=""
                class="img_state"
                style="left: 20%; top: 20%"
                v-if="stateIndex == 0 || stateIndex == 8"
              />
              <img
                src="../../assets/car1.png"
                alt=""
                class="img_state"
                style="left: 20%; top: 32%"
                v-if="stateIndex == 0 || stateIndex == 2"
              />
              <img
                src="../../assets/car1.png"
                alt=""
                class="img_state"
                style="left: 37%; top: 33%"
                v-if="stateIndex == 0 || stateIndex == 2"
              />
              <img
                src="../../assets/camera.png"
                alt=""
                class="img_state"
                style="left: 16%; top: 33%"
                v-if="stateIndex == 0 || stateIndex == 1"
              />
              <img
                src="../../assets/camera.png"
                alt=""
                class="img_state"
                style="left: 60%; top: 33%"
                v-if="stateIndex == 0 || stateIndex == 1"
              />
              <img
                src="../../assets/car1.png"
                alt=""
                class="img_state"
                style="left: 57%; top: 38%"
                v-if="stateIndex == 0 || stateIndex == 2"
              />
              <img
                src="../../assets/weather.png"
                alt=""
                class="img_state"
                style="left: 70%; top: 55%"
                v-if="stateIndex == 0 || stateIndex == 7"
              />
              <img
                src="../../assets/car1.png"
                alt=""
                class="img_state"
                style="left: 75%; top: 57%"
                v-if="stateIndex == 0 || stateIndex == 2"
              />
              <img
                src="../../assets/camera.png"
                alt=""
                class="img_state"
                style="left: 57%; top: 64%"
                v-if="stateIndex == 0 || stateIndex == 1"
              />
              <img
                src="../../assets/car1.png"
                alt=""
                class="img_state"
                style="left: 59%; top: 67%"
                v-if="stateIndex == 0 || stateIndex == 2"
              />
              <img
                src="../../assets/gas.png"
                alt=""
                class="img_state"
                style="left: 70%; top: 79%"
                v-if="stateIndex == 0 || stateIndex == 9"
              />
              <img
                src="../../assets/camera.png"
                alt=""
                class="img_state"
                style="left: -4%; top: 64%"
                v-if="stateIndex == 0 || stateIndex == 1"
              />
              <img
                src="../../assets/bridge.png"
                alt=""
                class="img_state"
                style="left: 5%; top: 64%"
                v-if="stateIndex == 0 || stateIndex == 3"
              />
              <img
                src="../../assets/car1.png"
                alt=""
                class="img_state"
                style="left: 8%; top: 66%"
                v-if="stateIndex == 0 || stateIndex == 2"
              />
              <img
                src="../../assets/board.png"
                alt=""
                class="img_state"
                style="left: 11%; top: 68%"
                v-if="stateIndex == 0 || stateIndex == 4"
              />
              <img
                src="../../assets/gas.png"
                alt=""
                class="img_state"
                style="left: 15%; top: 72%"
                v-if="stateIndex == 0 || stateIndex == 9"
              />
            </div>
            <div class="down_right">
              <div class="l-rblock box1">
                <img
                  src="../../assets/border21.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="l-rblock">
                  <p class="p1" style="padding-left: 11px">路况拥堵情况</p>
                  <div
                    style="
                      width: 100%;
                      height: 300px;
                      position: relative;
                      margin-top: 10px;
                    "
                  >
                    <l-echarts
                      :option="roadOption"
                      style="height: 100%"
                    ></l-echarts>
                  </div>
                </div>
              </div>
              <div class="l-rblock box2">
                <img
                  src="../../assets/border21.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="l-rblock">
                  <p class="p1" style="padding-left: 11px">路况巡查情况</p>
                  <div class="box21">
                    <l-echarts
                      :option="road2Option"
                      style="width: 50%; height: 100%"
                    ></l-echarts>
                    <div class="p31">
                      <p>
                        <span class="p32"></span>点状巡查<span class="p3"
                          >5</span
                        >次
                      </p>
                      <p>
                        <span class="p32 p322"></span>带状路网<span class="p3"
                          >4</span
                        >次
                      </p>
                      <p>
                        <span class="p32 p323"></span>专项巡查<span class="p3"
                          >7</span
                        >次
                      </p>
                    </div>
                    <div class="box22">
                      <p>18</p>
                      <p>总数</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="l-rblock box3">
                <img
                  src="../../assets/border21.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="l-rblock">
                  <p class="p1" style="padding-left: 11px">分类统计</p>
                  <div class="box31" >
                    <div>
                  <p><span class="p2">25</span>个</p>
                  <p>桥梁</p>
                </div>
                <div>
                  <p><span class="p2">40</span>cm</p>
                  <p>桥梁总长</p>
                </div>
                <div>
                  <p><span class="p2">1354</span>KM</p>
                  <p>桥梁</p>
                </div>
                <div>
                  <p><span class="p2">40</span>km</p>
                  <p>高架路面</p>
                </div>
                <div>
                  <p><span class="p2">16</span>个</p>
                  <p>隧道</p>
                </div>
                <div>
                  <p><span class="p2">8</span>cm</p>
                  <p>隧道总长</p>
                </div>
                <div>
                  <p><span class="p2">86</span>km</p>
                  <p>桥梁</p>
                </div>
                <div>
                  <p><span class="p2">35</span>个</p>
                  <p>服务区</p>
                </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </l-layout>
</template>

<script>
export default {
  data() {
    return {
      pieOption: {
        grid: {
          top: "13%",
          bottom: "10%",
          left: "15%",
        },
        series: [],
      },
      stateIndex: 0,
      scale: 1
    };
  },
  mounted() {
    this.initSize();
  },
  computed: {
    barOption() {
      let option = this.$deepClone(this.pieOption);
      (option.xAxis = {
        type: "category",
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#5376C3"],
          },
        },
        data: ["01-18", "01-19", "01-20", "01-21", "01-22", "01-23", "01-24"],
        axisLabel: {
          textStyle: {
            color: "#5376C3",
          },
        },
      }),
        (option.yAxis = {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#5376C3"],
            },
          },
          name: "单位：次",
          axisLabel: {
            textStyle: {
              color: "#5376C3",
            },
          },
          nameTextStyle: {
            color: "#5376C3",
          },
        }),
        (option.legend = {
          data: ["维修", "故障"],
          textStyle: {
            color: "#5376C3",
          },
          right: "10%",
          icon: "roundRect",
          itemheight: 14,
          itemWidth: 14,
        }),
        (option.series = [
          {
            name: "维修",
            data: [410, 250, 350, 450, 200, 300, 300],
            type: "bar",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#CF489D",
                },
                {
                  offset: 1,
                  color: "#D03F68",
                },
              ],
              global: false,
            },
          },
          {
            name: "故障",
            data: [320, 360, 540, 300, 370, 230, 230],
            type: "bar",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#05C4F9",
                },
                {
                  offset: 1,
                  color: "#0365F5",
                },
              ],
              global: false,
            },
          },
        ]);
      return option;
    },
    lineOption() {
      let option = this.$deepClone(this.pieOption);
      option.grid = {
        top: "20%",
        bottom: "20%",
        left: "12%",
      };
      (option.xAxis = {
        type: "category",
        boundaryGap: false,
        splitLine: {
          show: true,

          lineStyle: {
            color: ["#999999"],
          },
        },
        data: ["07-10", "07-11", "07-12", "07-13", "07-14", "07-15", "07-16"],
        axisLabel: {
          textStyle: {
            color: "#ffffff",
          },
        },
      }),
        (option.yAxis = {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#999999"],
            },
          },
          name: "单位：万人",
          axisLabel: {
            textStyle: {
              color: "#ffffff",
            },
          },
          nameTextStyle: {
            color: "#ffffff",
          },
        }),
        (option.series = [
          {
            data: [1, 3, 1.8, 2, 3.5, 1.8, 2.8],
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 5,
            areaStyle: {
              opacity: 0.4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "yellow",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ],
                global: false,
              },
            },
            itemStyle: {
              color: "yellow",
            },
          },
        ]);
      return option;
    },
    pie2Option() {
      let option = this.$deepClone(this.pieOption);
      option.series = [
        {
          name: "tourist",
          type: "pie",
          radius: [0, 80],
          center: ["50%", "50%"],
          roseType: "area",
          label: {
            textStyle: {
              color: "#ffffff",
            },
          },
          data: [
            {
              value: 18,
              name: "西北地区",
              itemStyle: {
                color: "#FFCC00",
              },
            },
            {
              value: 22,
              name: "华北地区",
              itemStyle: {
                color: "#F35358",
              },
            },
            {
              value: 26,
              name: "东北地区",
              itemStyle: {
                color: "#6633FF",
              },
            },
            {
              value: 28,
              name: "华南地区",
              itemStyle: {
                color: "#00CACF",
              },
            },
            {
              value: 30,
              name: "华中地区",
              itemStyle: {
                color: "#FFAA00",
              },
            },
            {
              value: 32,
              name: "华东地区",
              itemStyle: {
                color: "#018CFF",
              },
            },
            {
              value: 38,
              name: "西南地区",
              itemStyle: {
                color: "#9E0CFF",
              },
            },
          ],
        },
      ];
      return option;
    },
    roadOption() {
      let option = {
        grid: { top: "13%", bottom: "10%", left: "15%" },
        series: [
          {
            name: "道路",
            data: [380, 420, 300, 390, 300, 370, 320],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#CF427D",
                  },
                  {
                    offset: 1,
                    color: "#CF4384",
                  },
                ],
                global: false,
              },
            },
            itemStyle: {
              color: "#CF427D",
            },
          },
          {
            name: "桥梁",
            data: [280, 320, 280, 450, 280, 300, 230],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#34D4F5",
                  },
                  {
                    offset: 1,
                    color: "#1A6A7B",
                  },
                ],
                global: false,
              },
            },
            itemStyle: {
              color: "#34D4F5",
            },
          },
        ],
        xAxis: {
          type: "category",
          splitLine: { show: true, lineStyle: { color: ["#0D2886"] } },
          data: ["01-18", "01-19", "01-20", "01-21", "01-22", "01-23", "01-24"],
          axisLabel: { textStyle: { color: "#5376C3" } },
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          splitLine: { show: true, lineStyle: { color: ["#0D2886"] } },
          name: "单位：时长",
          axisLabel: { textStyle: { color: "#5376C3" } },
          nameTextStyle: { color: "#5376C3" },
        },
        legend: {
          data: ["桥梁", "道路"],
          textStyle: { color: "#5376C3" },
          right: "10%",
          icon: "roundRect",
          itemheight: 14,
          itemWidth: 14,
        },
      };
      return option;
    },
    road2Option() {
      let option = {
        series: [
          {
            name: "road",
            type: "pie",
            radius: [50, 80],
            center: ["50%", "50%"],
            roseType: "area",
            label: {
              show: false,
            },
            data: [
              {
                value: 7,
                name: "专项巡查",
                itemStyle: {
                  color: "#025FFD",
                },
              },
              {
                value: 5,
                name: "点状巡查",
                itemStyle: {
                  color: "#00CACF",
                },
              },
              {
                value: 4,
                name: "带状路网",
                itemStyle: {
                  color: "#F88908",
                },
              },
            ],
          },
        ],
      };
      return option;
    },
  },
  methods: {
    initSize() {
      let height = document.getElementById("intelligentTrans").clientHeight
      if(height > 1080)  this.scale = height / 1080
    }
  },
};
</script>
<style lang="scss">
.intelligentTrans {
  .box_2 {
    height: 1080px;
  }
  .biContent {
    overflow: auto;

    .biTop {
      width: 100%;
      height: 56px;
      position: relative;
      .top_left {
        width: 216px;
        height: 56px;
        line-height: 56px;
        font-size: 18px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        position: absolute;
        top: 0px;
        left: 20px;
      }
      .top_center {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        .top_p {
          position: absolute;
          left: 0;
          top: 0;
          text-align: center;
          width: 100%;
          font-size: 30px;
          font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
          font-weight: 400;
          color: #ffffff;
          height: 46px;
          line-height: 46px;
          font-style: italic;
        }
      }
      .top_right {
        height: 24px;
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        position: absolute;
        right: 20px;
        top: 16px;
      }
    }
    .biDown {
      position: absolute;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 20px;
      .down_left {
        position: relative;
        width: 22%;
        .box1 {
          padding: 0 13px 20px 20px;
          height: 237px;
          .jid {
            width: 96%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin-top: 25px;
            > div {
              width: 36px;
              height: 48px;
              line-height: 49px;
              background: #0150fb;
              font-size: 30px;
              font-family: Arial-Bold, Arial;
              font-weight: bold;
              color: #ffffff;
            }
            > p {
              width: 18px;
              height: 24px;
              font-size: 9px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #577cce;
              line-height: 2.5;
            }
          }
          .jid2 {
            width: 96%;
            margin: auto;
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin-top: 36px;
            > div {
              font-size: 14px;
            }
            .border_sty {
              width: 2px;
              height: 30px;
              background: linear-gradient(
                180deg,
                rgba(12, 254, 245, 0) 0%,
                #0cfef5 47%,
                rgba(12, 254, 245, 0) 100%
              );
            }
          }
        }
        .box2 {
          height: 392px;
          margin-top: 20px;
          padding: 0 13px 20px 20px;
          .jid {
            width: 100%;
            height: 300px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
            text-align: center;
            margin-top: 50px;
            font-size: 12px;
            color: #ffffff;
            > div {
              width: 32%;
              height: 32%;
              position: relative;
              > img {
                width: 10px;
                position: absolute;
                right: 10px;
                top: 0;
              }
            }
            .div1 {
              .div_bor {
                    width: 83%;
                    height: 67%;
                    margin: auto;
                    background: linear-gradient(90deg, rgba(13,26,73,0.26) 0%, #1C90F6 100%);
                    border-radius: 0 50% 50% 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
              }
              .perfect {
                   width: 21px;
                height: 21px;
                background: -webkit-gradient(
                  linear,
                  left top,
                  left bottom,
                  from(#19c0e5),
                  to(#156fe0)
                );
                background: linear-gradient(180deg, #19c0e5 0%, #156fe0 100%);
                font-size: 6px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #021229;
                border-radius: 50%;
                position: absolute;
                right: 10px;
                top: -3px;
              }
            }
            .el-progress-circle {
              width: 100% !important;
              height: 100% !important;
            }
            .el-progress__text {
              font-size: 12px;
              color: #ffffff;
              scale: 0.8;
              top: 49%;
            }
          }
        }
        .box3 {
          padding: 0 13px 20px 20px;
          height: 314px;
          margin-top: 20px;
        }

        .left_top {
          position: relative;
          left: -10px;
          top: 0;
          width: 50%;
          height: 24px;
          text-align: center;
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 24px;
          > img {
            width: 100%;
            height: 15px;
            position: absolute;
            top: 5px;
            left: 0;
          }
        }
      }
      .down_center {
        width: 53%;
        margin-top: 28px;
        position: relative;
        .box1 {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #5376c3;
          .p2 {
            font-size: 26px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #0cfef5;
          }
          > div {
            width: 18%;
            height: 80px;
            background: rgba(13, 40, 134, 0.2);
            border: 1px solid #0d2886;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
        .box2 {
          width: 100%;
          height: 140px;
          background: rgba(13, 40, 134, 0.2);
          border: 1px solid #0d2886;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          position: absolute;
          bottom: 0;
          left: 0;
          > div {
            width: 8%;
            height: 100px;
            background: rgba(28, 144, 246, 0.2);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            > img {
              width: 60%;
              margin-bottom: 8px;
            }
          }
          .bg {
            background: rgba(28, 144, 246, 0.6);
          }
        }
        .img_state {
          width: 40px;
          position: absolute;
          left: 20%;
          top: 20%;
        }
      }
      .down_right {
        width: 22%;
        height: 510px;
        .box1 {
          width: 100%;
          height: 366px;
          padding: 0 13px 20px 20px;
        }
        .box2 {
          width: 100%;
          height: 300px;
          margin-top: 20px;
          padding: 0 13px 20px 20px;
          .box21 {
            width: 100%;
            height: 200px;
            position: relative;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-around;
          }
          .box22 {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 24px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #ffffff;
          }
        }
        .box3{
          width: 100%;
          height: 278px;
          margin-top: 20px;
          padding: 0 20px 20px;
          .box31{
            width: 100%;
                      height: 222px;
                      position: relative;
                      margin-top: 10px;
            display: flex;
            align-content: space-around;
            justify-content: space-around;
            flex-wrap: wrap;
            >div{
              width: 23%;
              height: 80px;
              background: rgba(13,40,134,0.69);
              text-align: center;
              display: flex;
            flex-direction: column;
            justify-content: center;
            }
            font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #5376c3;
          .p2 {
            font-size: 20px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #66FFFF;
          }
          }
        }
      }
      .p1 {
        font-size: 18px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        padding-top: 8px;
      }
      .p31 {
        width: 50%;
        color: #ffffff;
        font-size: 16px;
        text-align: center;
      }
      .p32 {
        width: 11px;
        height: 11px;
        display: inline-block;
        background-color: #fe7a30;
        border-radius: 50%;
        margin-right: 8px;
      }
      .p322 {
        background-color: #00cacf;
      }
      .p323 {
        background-color: #025ffd;
      }
      .p3 {
        color: #0cfef5;
        font-size: 20px;
      }
      .bg_img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      .img_27 {
        width: 54px;
        height: 54px;
      }
    }
  }
}
</style>

